<template>
  <div class="nav">
    <div class="nav-job">
      <div class="a"></div>
      <div>购物车</div>
      <router-link to="/shanchuView"><div>删除</div></router-link>
    </div>
    <div class="zhuren">
        <div><van-icon name="shopping-cart-o" /></div>
    </div>
    <div class="zhuren-job">
        <div>主银，您的购物车为空的哦！</div>
    </div>
    <div class="a">
        <div class="aa">返回首页</div>
        <div class="aaa">去逛逛</div>
    </div>
    <div class="recommend">
    <div class="recommend-job">为你推荐</div>
    <div class="wen">
      <div>FOR YOU</div>
      <div>RECOMMENDED</div>
    </div>
  </div>
  <div class="pp">
    <div class="shangping">
      <div class="shangpin-jobb">
        <div><img src="../../assets/images/20.png" alt="" /></div>
        <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
        <div class="aaaa">
          <div class="bb">￥<span>108</span></div>
          <div>¥ 297</div>
        </div>
      </div>
    </div>
    <div class="shangping">
      <div class="shangpin-jobb">
        <div><img src="../../assets/images/20.png" alt="" /></div>
        <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
        <div class="aaaa">
          <div class="bb">￥<span>108</span></div>
          <div>¥ 297</div>
        </div>
      </div>
    </div>
  </div>
  <div class="pp">
    <div class="shangping">
      <div class="shangpin-jobb">
        <div><img src="../../assets/images/20.png" alt="" /></div>
        <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
        <div class="aaaa">
          <div class="bb">￥<span>108</span></div>
          <div>¥ 297</div>
        </div>
      </div>
    </div>
    <div class="shangping">
      <div class="shangpin-jobb">
        <div><img src="../../assets/images/20.png" alt="" /></div>
        <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
        <div class="aaaa">
          <div class="bb">￥<span>108</span></div>
          <div>¥ 297</div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>
<style scoped>
.nav-job {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #ccc;
}
.nav-job div:nth-child(2) {
  color: #09b674;
}
.zhuren{
    font-size: 40px;
    text-align: center;
    border: 1px solid #ccc;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    margin-top: 20px;
    border-radius: 50%;
    background-color: #ccc;
}
.zhuren div{
    margin-top: 5px;
}
.zhuren-job {
    margin-top: 15px;
    text-align: center;
    color: #818181;
}
.a {
    display: flex;
    justify-content: space-around;
    margin-top: 25px;
    margin-right: 30px;
}
.aa {
    border: 1px solid #ccc;
    padding: 5px 10px;
}
.aaa {
    border: 1px solid #09b674;
    padding: 5px 20px;
    color: #fff;
    background-color: #09b674;
}
.recommend {
  display: flex;
  justify-content: center;
  /* padding: 20px 0; */
  margin-top: 30px;
  color: #09b674;
}
.recommend-job {
  font-size: 18px;
}
.wen {
  color: #09b674;
  font-size: 12px;
  padding: 0 10px;
}
.shangping img {
  width: 150px;
  height: 150px;
}
.shangping {
  padding: 10px;
  display: flex;
  justify-content: space-around;
}
.shangping-job {
  width: 50%;
}
.shangpin-jobb div:nth-child(2) {
  font-size: 14px;
}
.pp {
  display: flex;
}
.aaaa {
  display: flex;
  /* justify-content: space-between; */
  padding: 5px 0;
}
.aaaa div:nth-child(2) {
  color: #ccc;
  text-decoration: line-through;
  font-weight: 100;
  margin-top: 5px;
  margin-left: 10px;
}
.bb {
  color: #f00;
}
.bb span {
  color: #f00;
  font-size: 18px;
}
</style>
